<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>淘房 - 登录</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="../../taofang/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../taofang/css/font-awesome.css?v=4.4.0" rel="stylesheet">


    <link href="../../taofang/css/animate.css" rel="stylesheet">
    <link href="../../taofang/css/style.css?v=4.1.0" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>

    <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        !(function(window, document) {
            function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
                this.options = { //默认options参数值
                    id: "", //容器Id
                    canvasId: "verifyCanvas", //canvas的ID
                    width: "100", //默认canvas宽度
                    height: "30", //默认canvas高度
                    type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
                    code: ""
                }

                if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型
                    for(var i in options) { //根据传入的参数，修改默认参数值
                        this.options[i] = options[i];
                    }
                }else{
                    this.options.id = options;
                }

                this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
                this.options.letterArr = getAllLetter();

                this._init();
                this.refresh();
            }

            GVerify.prototype = {
                /**版本号**/
                version: '1.0.0',

                /**初始化方法**/
                _init: function() {
                    var con = document.getElementById(this.options.id);
                    var canvas = document.createElement("canvas");
                    this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
                    this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
                    canvas.id = this.options.canvasId;
                    canvas.width = this.options.width;
                    canvas.height = this.options.height;
                    canvas.style.cursor = "pointer";
                    canvas.innerHTML = "您的浏览器版本不支持canvas";
                    con.appendChild(canvas);
                    var parent = this;
                    canvas.onclick = function(){
                        parent.refresh();
                    }
                },

                /**生成验证码**/
                refresh: function() {
                    this.options.code = "";
                    var canvas = document.getElementById(this.options.canvasId);
                    if(canvas.getContext) {
                        var ctx = canvas.getContext('2d');
                    }else{
                        return;
                    }

                    ctx.textBaseline = "middle";

                    ctx.fillStyle = randomColor(180, 240);
                    ctx.fillRect(0, 0, this.options.width, this.options.height);

                    if(this.options.type == "blend") { //判断验证码类型
                        var txtArr = this.options.numArr.concat(this.options.letterArr);
                    } else if(this.options.type == "number") {
                        var txtArr = this.options.numArr;
                    } else {
                        var txtArr = this.options.letterArr;
                    }

                    for(var i = 1; i <= 4; i++) {
                        var txt = txtArr[randomNum(0, txtArr.length)];
                        this.options.code += txt;
                        ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小
                        ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
                        ctx.shadowOffsetX = randomNum(-3, 3);
                        ctx.shadowOffsetY = randomNum(-3, 3);
                        ctx.shadowBlur = randomNum(-3, 3);
                        ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
                        var x = this.options.width / 5 * i;
                        var y = this.options.height / 2;
                        var deg = randomNum(-30, 30);
                        /**设置旋转角度和坐标原点**/
                        ctx.translate(x, y);
                        ctx.rotate(deg * Math.PI / 180);
                        ctx.fillText(txt, 0, 0);
                        /**恢复旋转角度和坐标原点**/
                        ctx.rotate(-deg * Math.PI / 180);
                        ctx.translate(-x, -y);
                    }
                    /**绘制干扰线**/
                    for(var i = 0; i < 4; i++) {
                        ctx.strokeStyle = randomColor(40, 180);
                        ctx.beginPath();
                        ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
                        ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
                        ctx.stroke();
                    }
                    /**绘制干扰点**/
                    for(var i = 0; i < this.options.width/4; i++) {
                        ctx.fillStyle = randomColor(0, 255);
                        ctx.beginPath();
                        ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
                        ctx.fill();
                    }
                },

                /**验证验证码**/
                validate: function(code){
                    var code = code.toLowerCase();
                    var v_code = this.options.code.toLowerCase();
                    console.log(v_code);
                    if(code == v_code){
                        return true;
                    }else{
                        this.refresh();
                        return false;
                    }
                }
            }
            /**生成字母数组**/
            function getAllLetter() {
                var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
                return letterStr.split(",");
            }
            /**生成一个随机数**/
            function randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            }
            /**生成一个随机色**/
            function randomColor(min, max) {
                var r = randomNum(min, max);
                var g = randomNum(min, max);
                var b = randomNum(min, max);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
            window.GVerify = GVerify;
        })(window, document);
    </script>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

</head>

<body class="gray-bg">


    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>
            <div style="margin-top: 60%">


            </div>
            <h3>欢迎使用 淘房</h3>
<%--            role="form" method="get"--%>
            <form id="login" class="m-t" >
                <div class="form-group">
                        <input type="text" class="form-control" id="account" name="account" placeholder="用户名" required="" onblur="checkname()">
                        <span id="account_id">请输入用户名</span>
                </div>
                <div class="form-group">
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码" required="" onblur="checkpwd()">
                        <span id="password_id">请输入密码</span>
                </div>



<%--                <div class="form-group">--%>
<%--                        <div id="v_container" style="width: 300px;height: 60px;"></div>--%>
<%--                        <input type="text" class="form-control" id="code_input" value="" placeholder="请输入验证码"/>--%>
<%--                        <span id="verify_id">*</span>--%>
<%--                </div>--%>




<%--                <div>--%>
<%--                    <label for="login">选择身份</label>--%>
<%--                    <select class="form-control" id="identity" onclick="checkpwd()">--%>
<%--                        <option>租客</option>--%>
<%--                        <option>经纪人</option>--%>
<%--                        <option>房东</option>--%>
<%--                    </select>--%>
<%--                </div>--%>


                <br>
                <input type="button" id="my_button" class="btn btn-primary block full-width m-b" onclick="return checkname(),checkpwd()" value="登 录">


                <p class="text-muted text-center"><a href="/taofang/register/check.action">注册一个新账号</a>
                </p>

            </form>
        </div>
    </div>








    <!-- 全局js -->

    <script src="../../taofang/plugins/jquery-3.4.1.js"></script>
    <script src="../../taofang/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <script>
        function checkname() {
            let name = $("#account").val();
            let datas = {"account":name}
            $.post('/taofang/login/selectaccount.action', datas, function (data) {
                if(data.code==200){
                    document.getElementById("account_id").innerText="用户名可用"
                }else {
                    document.getElementById("account_id").innerText="用户名不存在"
                }
            })
        }

        function checkpwd() {
            let name = $("#account").val();
            let password = $("#password").val();
            let datas = {"account":name,"password":password};
            $.post('/taofang/login/selectpassword.action', datas, function (data) {
                if(data.code==200){
                    document.getElementById("password_id").innerText="密码正确"
                    $.ajax({
                        type:'post',
                        url:'/taofang/login/success.action?account='+name,
                        data:datas,
                        contentType:'application/json;charset=utf-8',
                        success:function(data){
                            window.location.href='/taofang/login/success.action?account='+name;
                        }
                    })

                }else {
                    document.getElementById("password_id").innerText="密码错误"
                }
            })
        }


        // let verifyCode = new GVerify("v_container");
        // document.getElementById("my_button").onclick = function(){
        //     let res = verifyCode.validate(document.getElementById("code_input").value);
        //     let name = $("#account").val();
        //     let password = $("#password").val();
        //     let datas = {"account":name,"password":password};
        //     if(res){
        //         document.getElementById("verify_id").innerText="验证码正确"
        //         $.ajax({
        //             type:'post',
        //             url:'/taofang/login/success.action?account='+name,
        //             data:datas,
        //             contentType:'application/json;charset=utf-8',
        //             success:function(data){
        //                 window.location.href='/taofang/login/success.action?account='+name;
        //             }
        //         })
        //
        //     }else{
        //         document.getElementById("verify_id").innerText="验证码错误"
        //     }
        // }


    </script>

</body>

</html>
